<div #divTable class="div-table">
  <nz-table
    nzSize="small"
    nzBordered
    #mainTable
    [nzScroll]="scroll"
    [nzShowTotal]="totalTemplate"
    [nzData]="tableData"
    [nzShowPagination]="showPagination"
    nzShowSizeChanger
    [nzTotal]="total"
    [(nzPageIndex)]="pageIndex"
    [(nzPageSize)]="pageSize"
    (nzPageSizeChange)="search()"
    (nzPageIndexChange)="search()"
    nzFrontPagination="false"
  >
    <ng-template #totalTemplate let-total>共 {{ total }} 条</ng-template>
    <thead (nzSortChange)="sort($event)" nzSingleSort>
    <tr>
      <th
        *ngIf="showCheckbox"
        nzWidth="50px"
        nzShowCheckbox
        [(nzChecked)]="allChecked"
        (nzCheckedChange)="checkAll($event)"
        [nzDisabled]="singleCheck"
      ></th>
      <ng-container *ngFor="let col of columns">
        <th [nzShowSort]="col?.isSort"
            [nzSortKey] = "col.item"
            [nzWidth]="col.width ? col.width + 'px' : '100px'"
            nzAlign="center">{{ col.title }}</th>
      </ng-container>
      <th *ngIf="lineBtnGroup.length > 0" [nzWidth]="lineBtnWidth + 'px'" nzRight="0px" nzAlign="center">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of mainTable.data; index as idx">
      <td
        *ngIf="showCheckbox"
        nzShowCheckbox
        [(nzChecked)]="checkedMap[idx]"
        (nzCheckedChange)="checkOne($event,idx)"
      ></td>
      <ng-container *ngFor="let col of columns">
        <ng-container [ngSwitch]="col?.type">
          <td nzBreakWord nzAlign="center" *ngSwitchCase="'enum'">{{ data[col.item] | enum:col.enum}}</td>
          <td nzBreakWord nzAlign="center" *ngSwitchCase="'date'">{{ data[col.item] | date:'yyyy-MM-dd'}}</td>
          <td nzBreakWord nzAlign="center" *ngSwitchCase="'group'">
            <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle">
              <label nz-col nzSpan="21">{{ data[col.item] }}</label>
              <i nz-icon nz-col nzSpan="3" [nzType]="col.suffixType ? col.suffixType : 'question-circle'"
                 (mouseover)="onSuffixClick(col.item, data)"></i>
            </div>
          </td>
          <td nzBreakWord nzAlign="center" *ngSwitchCase="'step'">
            <!--            <nz-steps nzSize="small" [nzCurrent]="data[col.item] - 1">-->
            <!--              <nz-step *ngFor="let step of col?.steps; index as stepIndex" [nzTitle]="step"-->
            <!--                       (click)="onStepClick(col.item, data, step, stepIndex)"></nz-step>-->
            <!--            </nz-steps>-->
            <nz-steps nzSize="small" nzCurrent="-1">
              <nz-step *ngFor="let step of data[col.item]; index as stepIndex" [nzTitle]="step.title"
                       [nzStatus]="step.status"
                       (click)="onStepClick(col.item, data, step, stepIndex)"></nz-step>
            </nz-steps>
          </td>
          <ng-container *ngSwitchCase="'labelList'">
            <td nzBreakWord nzAlign="center" nz-popover
                *ngIf="data[col.item] && data[col.item].length > 3"
                nzPopoverPlacement="right" nzPopoverTitle="标签名称" [nzPopoverContent]="labelTemplate"
                nzPopoverTrigger="hover" [nzOverlayStyle]="{'max-width': '400px'}">
              <nz-tag *ngFor="let label of data[col.item].slice(0,3)" [nzColor]="label?.color"
                      style="margin-bottom: 2px">{{ label?.labelname }}</nz-tag>
            </td>
            <td nzBreakWord nzAlign="center" *ngIf="!data[col.item] || data[col.item].length <= 3">
              <nz-tag *ngFor="let label of data[col.item]" [nzColor]="label?.color"
                      style="margin-bottom: 2px">{{ label?.labelname }}</nz-tag>
            </td>
          </ng-container>
          <ng-template #labelTemplate>
            <nz-tag *ngFor="let label of data[col.item]" [nzColor]="label?.color"
                    style="margin-bottom: 2px">{{ label?.labelname }}</nz-tag>
          </ng-template>
          <td nzBreakWord nzAlign="center" *ngSwitchCase="'backstyle'">
            <nz-avatar *ngIf="data[col.item]  == '0'" class="backstyle"
                       (click)="onQuestionClick(col.item,data)"
                       [nzShape]="'square'" [nzSize]="'large'"
                       [nzText]="data[col.item] | enum:col.enum"></nz-avatar>
            <nz-avatar *ngIf="data[col.item]  == '1'" [ngStyle]="{'background-color':'#CD4F39'}" class="backstyle"
                       (click)="onQuestionClick(col.item,data)"
                       [nzShape]="'square'" [nzSize]="'large'"
                       [nzText]="data[col.item] | enum:col.enum"></nz-avatar>
          </td>
          <ng-container *ngSwitchDefault>
            <td nzBreakWord nzAlign="center" [ngSwitch]="col?.inputType?.name"
                [ngStyle]="{'background-color': col?.style?.value.indexOf(data[col.item]) >= 0 ? col?.style?.backgroundColor:''}"
            >
              <input nz-input *ngSwitchCase="'input'" [(ngModel)]="data[col.item]"
                     [maxlength]="col?.inputType?.maxLength"
                     [placeholder]="col?.inputType?.placeholder?col?.inputType?.placeholder:''"
                     (ngModelChange)="onInputChange(col.item, data[col.item], data)"
                     [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                     style="width: 100%">
              <textarea *ngSwitchCase="'textarea'" [(ngModel)]="data[col.item]" nzAutosize="true"
                        [maxlength]="col?.inputType?.maxLength"
                        [placeholder]="col?.inputType?.placeholder?col?.inputType?.placeholder:''"
                        (ngModelChange)="onInputChange(col.item, data[col.item], data)"
                        [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                        style="width: 100%"></textarea>
              <nz-input-number *ngSwitchCase="'inputNumber'" [(ngModel)]="data[col.item]"
                               [nzId]="col.item + parentIndex.toString() + idx.toString()"
                               [nzMax]="col?.inputType?.max" [nzMin]="col?.inputType?.min"
                               [nzPrecision]="col?.inputType?.precision"
                               (ngModelChange)="onInputChange(col.item, data[col.item], data)"
                               (keyup.enter)="onKeyEnter(col,idx)"
                               [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                               [ngStyle]="{'width': '100%','background-color': col?.inputType?.style?.value.indexOf(data[col.item]) >= 0 ? col?.inputType?.style?.backgroundColor:'white'}"
              ></nz-input-number>
              <nz-radio-group *ngSwitchCase="'radioGroup'" [(ngModel)]="data[col.item]"
                              [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                              style="width: 100%">
                <label nz-radio *ngFor="let radio of col?.inputType?.radioList"
                       [nzValue]="radio?.value"
                       (click)="onRadioClick(data, col.item, radio?.value)">{{ radio?.text }}</label>
              </nz-radio-group>
              <nz-select *ngSwitchCase="'select'" nzAllowClear nzShowSearch [(ngModel)]="data[col.item]"
                         (ngModelChange)="onInputChange(col.item, data[col.item], data)"
                         [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                         style="width: 100%">
                <nz-option *ngFor="let opt of col?.inputType?.list" [nzLabel]="opt[col?.inputType?.labelField]"
                           [nzValue]="opt[col?.inputType?.valueField]" [nzDisabled]="opt?.disabled"></nz-option>
              </nz-select>
              <nz-select *ngSwitchCase="'selectOfMap'" nzAllowClear nzShowSearch [(ngModel)]="data[col.item]"
                         (ngModelChange)="onInputChange(col.item, data[col.item], data)"
                         [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                         style="width: 100%">
                <nz-option *ngFor="let opt of col?.inputType?.map[data[col?.inputType?.key]]"
                           [nzLabel]="opt[col?.inputType?.labelField]"
                           [nzValue]="opt[col?.inputType?.valueField]"
                           [nzDisabled]="opt?.disabled"></nz-option>
              </nz-select>
              <label nzAlign="center" *ngSwitchCase="'count'">{{ idx + 1}}</label>
              <label nz-checkbox *ngSwitchCase="'checkbox'" [(ngModel)]="data[col.item]"
                     [disabled]="col?.inputType?.disabled?.value && col?.inputType?.disabled?.value.indexOf(data[col?.inputType?.disabled?.key]) >= 0"
                     style="width: 100%"></label>
              <label *ngSwitchDefault
                     [ngStyle]="{'color': data[col?.style?.key] == col?.style?.value ? col?.style?.color:''}"
              >{{ data[col.item] }}</label>
            </td>
          </ng-container>
        </ng-container>
      </ng-container>
      <td *ngIf="lineBtnGroup.length > 0" nzRight="0px" nzAlign="center">
        <ng-container *ngFor="let btn of lineBtnGroup; index as i">
          <ng-container [ngSwitch]="btn?.type?.name">
            <a *ngSwitchCase="'icon'" (click)="onLineBtnClick(btn, data)">
              <i nz-icon [nzType]="btn?.type?.iconType" style="font-size: 28px"></i>
            </a>
            <ng-container *ngSwitchDefault>
              <a *ngIf="lineBtnGroup.length > 1 && i < lineBtnGroup.length - 1; else lineBtnElse"
                 (click)="onLineBtnClick(btn, data)">{{ btn.title + ' ' }}</a>
              <ng-template #lineBtnElse>
                <a (click)="onLineBtnClick(btn, data)">{{ btn.title + '' }}</a>
              </ng-template>
            </ng-container>
          </ng-container>
        </ng-container>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
